import React, { Component } from 'react'
import styles from './index.module.scss'
import ctx from '@/assets/js/ctx'
import ItemWarp from '@/components/ItemWarp'
import { Tabs,PullToRefresh,ListView } from 'antd-mobile'
import classnames from 'classnames'
import BackTop from '@/components/BackTop'

export class VideoChannel extends Component {
    static contextType = ctx

    constructor(){
        super()

        this.state ={
            tabs : [
                { title: '广场' , sub: ''},
                { title: '动画' , sub: '1'},
                { title: '娱乐' , sub: '2'},
                { title: '游戏' , sub: '3'},
            ],
            videoList:[],
            pageNum:1,
            refreshing:false,
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),
            isLoadingMore: false, 
            isAllLoaded: false,
            videoType:'',
            val:'',
            keyword:'',
            searchText:'搜索'
        }
    }

    reqVideoList = (pageNum) => {
        const {videoType,keyword} = this.state
        return this.context.axios.post('/bulubulu/api/video/list',{
            pageNum,
            videoType,
            keyword
        })
    }

    onRefresh = ( type = "刷新") => {
        if(type== "刷新"){
            this.setState({
                val:'',
                keyword:''
            })
        }
        this.setState({
            refreshing: true
        })

        this.reqVideoList(1)
        .then((res) => {
            const {code,msg,data} = res

            if(code == 1){
                this.setState({
                    videoList: data, 
                    pageNum: 1,                    
                    dataSource: this.state.dataSource.cloneWithRows(data)
                })
            }else{
                console.log(msg)
            }            
            this.setState({
                refreshing: false,
                isAllLoaded: false
            })
        })             
    }

    onEndReached = () => {        
        if(this.state.isAllLoaded) return false        
        if(this.state.isLoadingMore) return false  

        this.setState({
            isLoadingMore: true
        })  

        this.reqVideoList(this.state.pageNum + 1)
        .then((res) => {
            const {code,msg,data} = res
            if(code == 1){
                if(data.length){                    
                    const videoList = this.state.videoList.concat(data)
                    this.setState({
                        videoList, 
                        pageNum: this.state.pageNum + 1, 
                        dataSource: this.state.dataSource.cloneWithRows(videoList), // 使用更新之后的列表数据，改变数据源
                    })
                }else{                    
                    this.setState({
                        isAllLoaded: true
                    })
                }
            }else{
                console.log(msg)
            }
            this.setState({
                isLoadingMore: false
            })
        })        
    }

    changeType = (tab)=>{
        const videoType = tab.sub
        this.setState({
            videoType
        },
            () => {
                this.onRefresh()
            }
        )
    }
    changeVal = (ev) => {
        this.setState({
            val:ev.target.value
        })
    }

    onSearch = () =>{
        const {searchText,val} = this.state
        
        if(searchText == '搜索'){
            this.setState({
                searchText:'取消',
                keyword:val
            },()=>{
                this.onRefresh('模糊查询')
            })
            
        }else{
            this.setState({
                searchText:'搜索',
                keyword:''
            },()=>{
                this.onRefresh()
            })
            
        }        
    }

    render() {

        const {tabs,refreshing,dataSource,isLoadingMore,isAllLoaded,val,searchText} = this.state
        const {onRefresh,onEndReached,changeType,onSearch,changeVal} = this
        return (
            <div className={styles.channel}>
                <div className={styles.topNav}>
                    <div className={styles.searchBar}>
                        <input type="text" className={styles.searchIpt} onChange={changeVal} value={val} />
                        <i className={classnames("iconfont","icon-faxianweixuanzhongxuanzhong",styles.searchIcon)}></i>
                        <span className={styles.searchBtn} onClick={onSearch}>{searchText}</span>
                    </div>
                    <Tabs
                    onChange={changeType}
                    tabBarBackgroundColor="#fb7299"
                    tabBarActiveTextColor="#fff"
                    tabBarInactiveTextColor="#fff"  
                    tabBarUnderlineStyle={{border: "1px #fff solid"}}                  
                    tabs={tabs} />
                </div>

                <ListView
                        dataSource={dataSource}
                        renderRow={
                            (rowData, sectionID, rowID) => {
                                
                                return <ItemWarp itemInfo={rowData} />
                            }
                        }
                        useBodyScroll={true}
                        pullToRefresh={
                            <PullToRefresh
                                refreshing={refreshing}
                                onRefresh={onRefresh}
                            />
                        }       
                        onEndReached={onEndReached}

                        onEndReachedThreshold={1}
                        renderFooter={
                            () => (<div style={{ padding: '.2rem', textAlign: 'center' }}>
                                {isLoadingMore ? '正在加载更多' : (isAllLoaded ? '没有更多了' : '')}
                            </div>)
                        }                    
                    />
                    <BackTop />
            </div>
        )
    }

    componentDidMount(){
        this.onRefresh()
    }
}

export default VideoChannel
